<template>
    <div class="all">
        <too></too>
        <div class="tit">
          <div class="tita" :class="showa == 0 ? 'actives' : ''"  @click="getItem(0)">全部</div>
            <div class="tita" v-for="(item, index) in tabList" :key="index" :class="showa == item.id ? 'actives' : ''"  @click="getItem(item.id)">{{item.name}}</div>
        </div>
        <div class="list">
            <div class="lista" v-if="dataList.length > 0" v-for="(item, index) in dataList" :key="index">
                <div class="lista1">
                    <img :src="item.zhutu_image" class="list_img">
                    <div class="list_tit">{{item.name}}</div>
                    <!--<div class="list_con">{{item.content}}</div>-->
                </div>
                <div class="lista2">
                    <div class="details" @click="details(index)">
                        查看详情
                        <img src="../assets/forword.png" class="forword"/>
                    </div>
                </div>
            </div>
            <div class="lista" v-show = 'dataList.length != 0'></div>
            <div v-show="dataList.length == 0" class="kong">
                <img  src="../assets/kong.png"/>
            </div>
        </div>
        <div id="demo2" class="fen"></div>
        <div class="butdi">

        </div>
      <foo @showCityName='ids'></foo>
    </div>
</template>

<script>
import too from '../components/too'
import foo from '../components/foo'
export default {
  name: 'projects',
  components:{
    too,
    foo
  },
  data () {
    return {
       showa: 0, // 0为默认选择第一个，-1为不选择
       dataList: [],
       tabList: [],
       page: 1,
       limit: 6
      }
    },
  created(options){
        if(this.$route.params.id != undefined){
            this.showa = this.$route.params.id
        }
        this.initData();
        this.initTab();
  },
  mounted(){
    this.$router.afterEach((to, from, next) => {
        window.scrollTo(0, 0)
    })
    layui.use(['laypage', 'element', 'layer'], function(){
      var element = layui.element,
        laypage = layui.laypage,
        layer = layui.layer;
    })
  },
  methods:{
      details(index) {
        let detalis = this.$common.baseUrl + this.dataList[index].detail_image;
        this.$router.push({name:'details', params: { url: detalis}})
     },
     getItem(index) {
           if(this.showa != index){
             this.showa = index;
             this.page = 1; //初始化分页
             this.initData();
           }
     },
    initTab(){
      this.$http.post(this.$common.baseUrl + '/api/Guanwang/fwxm').then( res =>{
        if(res.data.code == 1){
          this.tabList = res.data.data;
        }else{
          layui.layer.msg(res.data.msg);
        }
      })
    },
    initData(){
        let loads = layui.layer.load(2, {
        shade: [0.6, '#fff'] //0.1透明度的白色背景
       });
        let param = {
            fuwuxiangmu_id: this.showa == 0 ? null : this.showa,
            page: this.page,
            limit: this.limit
        }
        this.$http.post(this.$common.baseUrl + '/api/Guanwang/xmal', param).then( res =>{
               layui.layer.close(loads);
              if(res.data.code == 1){
                let data = res.data.data.list;
                 for(let k in data){
                    data[k].zhutu_image = this.$common.baseUrl + data[k].zhutu_image;
                 }
                 this.dataList = data;
                 if(this.page == 1){
                    this.initpage(res.data.data.count);
                 }
              }else{
                layui.layer.msg(res.data.msg);
              }
        })
    },
    initpage: function (count) {
      layui.laypage.render({
        elem: 'demo2'
        ,count: count
        ,limit: this.limit
        ,prev: '<em><</em>'
        ,next: '<em>></em>'
        ,theme: '#1E9FFF'
        , jump: function (obj, first) {
          if (!first) {
            this.page = obj.curr;
            this.initData();
          }
        }
      });
    },
    ids(id){
        this.showa = id;
        this.initData();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.all{
    width: 100%;
    font-size:2vw;
    color: #333333;
}
.tit{
    display: flex;
    justify-content:flex-start;
    margin: auto;
    padding: 2vw 1% 2vw 10%;
    box-shadow:0 -1px 3px -1px #909090;
}
.kong{
  width: 500px;
  height: 500px;
  margin: 0 auto;
  text-align: center;
  margin-top: 0.6rem;
}
.kong img{
  width: 100%;
  height:100%;
}
.tita{
    color: #0086CD;
    cursor: pointer;
    letter-spacing: 0.05rem;
    border-radius: 0.1rem;
    padding: 0.6vw 1vw;
    text-align: center;
    font-size: 1.6vw;
}
.actives{
    color: #FFF;
    background: #0086CD;
}
.list{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
    text-align: left;
}
.lista{
    width: 26%;
    position: relative;
    margin-bottom: 0.8rem;
}
.lista1,.lista2{
    width: 100%;
    cursor: pointer;
}
.lista2,.details{
    display: flex;
    justify-content: center;
    align-items: center;
}
.lista2{
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #0086CD;
    font-size: 0.25rem;
    opacity: 0;
    width: 100%;
    height: 100%;
}
.details{
    width: 1.8rem;
    height: 0.4rem;
    background: #FFF;
    border-radius: 0.2rem;
}
.forword{
    width: 0.12rem;
    height: 0.22rem;
    margin-left: 0.2rem;;
}
.list_img{
    width: 100%;
    height: auto;
}
.list_tit{
    padding: 0.2rem 0 0.2rem 0.5rem;
    border-bottom: 1px #0086CD dashed;
    color: #0086CD;
    font-size: 0.17rem;
    position: absolute;
    width: 83%;
    bottom: 13vh;
}
.list_con{
    position: absolute;
    bottom: 0.1rem;
    margin: 0.2rem 0.2rem 0 0.2rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
    text-shadow:1px 1px 1px #555555;
    color: #555555;
    letter-spacing: 0.01rem;
    height: 0.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
/* 悬浮 */
.lista:hover .lista2{
    opacity: 1;
}
.fen{
  margin: 0 auto;
}
.butdi{
  width: 100%;
}
@media only screen and (max-width: 1200px) {
.tita{
        font-size: 18px!important;
    }
}
</style>
